<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<!-- 标题 -->
	<title>快速入门</title>
	<!-- 作者 -->
	<meta name="author" content="冻皮">
	<!-- 摘要 -->
	<meta name="description" content="本文是乱堆标记语言的简要聚集，展示了常见的标签，可用在快速入门和书写参考。具体标签的用法需看相应标签的文档。">
	<!-- 许可协议 -->
	<link rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/deed.zh">
	<!-- 创作日期 -->
	<!-- 修改日期 -->
	<style>
		@counter-style 章节数 {
			system: extends simp-chinese-informal;
			prefix: "第";
			suffix: "章　";
		}
		.目录 {
			list-style-position: inside;
		}
		.目录 ol  {
			list-style-type: 章节数;
		}
		.目录 ol li ol  {
			list-style-type: simp-chinese-informal;
		}
		table, th, td {
			border: 1px solid;
		}
		ul.空 {
			list-style-type: circle;
		}
		ul.待办事项 {
			list-style: none;
		}
		span.参考 > sup > a::after {
			display: none;
		}
		span.参考 > sup > a:hover::after {
			display: unset;
		}
		.参考数1::after {
			content: "《GB/T 7714-2015 信息与文献 参考文献著录规则》";
		}
		span.参考 > cite {
			display: none;
		}
		span.参考:hover > cite {
			display: unset;
		}
		code.高亮.Rust .内建 {
			color: #f5871f;
		}
		code.高亮.HTML .标签 {
			color: #c82829;
		}
	</style>
</head>
<body>
	<!-- 本文信息 -->
	<header>
		<!-- 标题 -->
		<h1>乱堆标记语言部分示例</h1>
		<table>
			<tr>
				<!-- 作者 -->
				<th scope="row">作者：</th>
				<td>冻皮</td>
			</tr>
			<tr>
				<!-- 创作日期 -->
				<th scope="row">创作时间：</th>
				<td>2020年03月15号 20点10分22秒</td>
			</tr>
			<tr>
				<!-- 修改日期 -->
				<th scope="row">修改时间：</th>
				<td>2020年04月27号 18点32分00秒</td>
			</tr>
		</table>

		<!-- 摘要 -->
		<h2>这里填写内容能改变摘要的标题</h2>
		<p>　　本文是乱堆标记语言的简要聚集，展示了常见的标签，可用在快速入门和书写参考。具体标签的用法需看相应标签的文档。</p>

		<!-- 目录 -->
		<nav class="目录">
			<ul>
				<li><a href="头：摘要">摘要</a></li>
				<li><a href="#正文：前言">前言</a></li>
			</ul>
			<ol>
				<li><a href="#正文：第一章　开始">开始</a>
					<ol>
					<li><a href="#正文：一、基本信息">基本信息</a></li>
					<li><a href="#正文：二、语言规则">语言规则</a></li>
					<li><a href="#正文：三、常用标记">常用标记</a></li>
					<li><a href="#正文：四、表格标记">表格标记</a></li>
					<li><a href="#正文：五、引用标记">引用标记</a></li>
					<li><a href="#正文：六、代码标记">代码标记</a></li>
					<li><a href="#正文：七、公式标记">公式标记</a></li>
					</ol>
				</li>
			</ol>
			<ul>
				<li><a href="#尾：参考">参考</a></li>
			</ul>
		</nav>
	</header>

	<!-- 正文 -->
	<main>
		<h2 id="正文：前言">前言</h2>
		<p>　　乱堆标记语言参考了 HTML、TeX和 markdown，但它并不比这些标记语言更好，编写此语言的目的仅仅是为了少些英文输入。</p>
		<p>　　此门标记语言仍在发展中，任何意见或建议均可使用<a href="https://gitee.com/DongPi/jumble_markup_language/issues">问题功能</a>提出。</p>

		<h2 id="正文：第一章　开始">第一章　开始</h2>
		<p>　　本章将带你快速学会乱堆标记语言的基本用法，领略这门标记语言的强大。</p>

		<h3 id="正文：一、基本信息">一、基本信息</h3>
		<p>　　乱堆标记语言是在参考<code>Markdown</code>、<code>LaTeX</code>和<code>HTML</code>后做出的一门较为基础和易用的标记语言，它标记清晰且通俗易懂，非常方便写各类文章甚至书籍。</p>

		<h3 id="正文：二、语言规则">二、语言规则</h3>
		<p>　　本门语言以书写文章为基础，添加标记为辅，不过多干扰书写流畅性为原则制定规则。</p>
		<ol>
			<li>以<code>｛</code>开头，以<code>｝</code>结尾，两个大括号中间包含描述，此为标记。</li>
			<li>标记一般出现在每行的开头，标记之后是内容。</li>
			<li>允许在内容中使用和独立成行的标记有开头和结尾。</li>
			<li>标记单独成行时表示后面跟着大块内容。</li>
			<li>块状和内容中使用的标记，开始标记如不包含状态则后面加<code>始</code>。</li>
			<li>非引用块和代码块中需连续两个空行才实际增加空行，实际空行数比插入空行数少一。</li>
			<li>中文空格是缩进也是空格。</li>
		</ol>

		<h3 id="正文：三、常用标记">三、常用标记</h3>
		<p>　　常用的标记为保证了书写流畅。</p>
		<ul>
			<li>标题
			<ol>
				<li><code>｛标题｝</code>是全文的标题。</li>
				<li><code>｛章｝</code>是章的标题。</li>
				<li><code>｛章数｝</code>是带有数字的章的标题。</li>
				<li><code>｛节｝</code>是节的标题。</li>
				<li><code>｛小节｝</code>是小节的标题。</li>
			</ol>
			</li>
			<li>作品信息
			<ul>
				<li><code>｛作者｝</code>是全文和引用的内容的作者。</li>
				<li><code>｛许可协议｝</code>是全文和引用的内容的许可协议。</li>
				<li><code>｛创作时间｝</code>是本文的创作时间。</li>
				<li><code>｛修改时间｝</code>是本文的最后修改时间。</li>
			</ul>
			</li>
			<li>文本
			<ul>
				<li><code>｛提醒｝</code>用于提醒内容，如：要<b>提醒</b>的文字。</li>
				<li><code>｛重要｝</code>用于重要内容，如：<strong>警告</strong>。</li>
				<li><code>｛强调｝</code>用于强调内容，如：请<em>不要</em>弄混它们的用途。</li>
				<li><code>｛标记｝</code>用于标记内容，如：这里<sup>上标</sup>和<sub>下标</sub>会改变文本排版结构。<mark>常规标记表示特殊内容</mark>，高亮只是样式不是功能。</li>
				<li><code>｛作品｝</code>用于作品的标题，如：<cite>这是一本书的名字</cite>。</li>
				<li><code>｛缩写｝</code>用于缩写。如：<abbr title="World-Wid Web">WWW</abbr></li>
				<li><code>｛术语｝</code>用于术语，如：<dfn title="专门学科的专门用语">术语</dfn>。</li>
				<li><code>｛去除｝</code>用于去除已经和内容无关的内容，如：<s>这句话被去除了</s>。</li>
				<li><code>｛删除｝</code>用于删除的内容，如：<del>这句话被删除了</del>。</li>
				<li><code>｛插入｝</code>用于新增的内容，如：<ins>这句话是新增的</ins>，删除和插入一般用于修改，去除用于不再相关的内容。</li>
				<li><code>｛字体｝</code>用于对内容增加语义无关样式，如：<span style="text-decoration-line: underline;font-style: italic;font-weight: bolder;color: #f28d83;">这是带有下划线、加粗、斜体和 #f28d83 颜色的文字</span>。</li>
			</ul>
			</li>
		</ul>

		<h3 id="正文：四、表格标记">四、表格标记</h3>
		<p>　　表格标记包含：表格、列表、待办事项、图表（如思维导图）。</p>

		<h4>表格</h4>
		<table>
			<caption>能给表格起标题</caption>
			<tr>
				<td>表</td>
				<td>格</td>
				<td>就</td>
				<td>是</td>
				<td>这</td>
				<td>样</td>
				<td>。</td>
			</tr>
			<tr>
				<td rowspan="2">表格可跨行合并</td>
				<td rowspan="2" colspan="3">亦可跨列合并</td>
				<td rowspan="2">多格一样内容。</td>
				<td rowspan="2">多格一样内容。</td>
			</tr>
			<tr></tr>
			<tr>
				<td rowspan="2" colspan="7">这行垮了两行七列。<br>重叠时会换行合并内容。</td>
			</tr>
			<tr></tr>
			<tr>
				<td colspan="5">开头和末尾的空格会无视。</td>
			</tr>
			<tr>
				<td colspan="2" style="text-align: left;">能设置</td>
				<td colspan="2" style="text-align: center;">对齐</td>
				<td colspan="2" style="text-align: right;">方向。</td>
			</tr>
		</table>
		<table>
			<caption>快速表格</caption>
			<tr>
				<td></td>
				<td colspan="3">跨列</td>
			</tr>
			<tr>
				<td>一</td>
				<td>二</td>
				<td>三</td>
				<td>四</td>
			</tr>
			<tr>
				<td rowspan="3">跨</td>
				<td colspan="3">空格不影响内容。</td>
			</tr>
			<tr>

				<td rowspan="2" colspan="3">横线就是被上一行跨越了<br>，可连续可拼接。</td>
			</tr>
			<tr></tr>
			<tr>
				<td rowspan="2" colspan="2">跨行跨列</td>
				<td>开头</td>
				<td>末尾</td>
			</tr>
			<tr>
				<td>空格</td>
				<td>会忽略</td>
			</tr>
		</table>

		<h4>列表</h4>
		<ol>
			<li>列表有序列表和无序列表。</li>
			<li>有序列表用｛列表数｝开始。</li>
		</ol>
		<ul>
			<li>无序列表用｛列表末｝开始。</li>
			<li>均以｛列｝结束。</li>
		</ul>
		<ul class="空">
			<li>在开始标记后能加上样式标记。</li>
		</ul>
		<ul>
		　　<li>这是第一层。</li>
		　　<li>列表标记后面加上内容能嵌套。
			<ul>
				<li>就像这样。
					<ol>
						<li>这是第三层</li>
						<li>的普通列。</li>
					</ol>
				</li>
				<li>这是第二层的普通列。</li>
			</ul>
		　　</li>
		　　<li>这也是第一层。</li>
		</ul>
		<dl>
			<dt>描述列表</dt>
			<dd>是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据（键-值对列表）。</dd>

			<dt>能</dt>
			<dt>多条</dt>
			<dt>术语</dt>
			<dd>一条描述。</dd>

			<dt>也能单条术语</dt>
			<dd>多条</dd>
			<dd>描述。</dd>
		</dl>

		<h4>待办事项</h4>
		<ul class="待办事项">
			<li><input type="checkbox" name="写完本项目。" id="写完本项目。"><label for="写完本项目。">写完本项目。</label></li>
			<li><input type="checkbox" name="添加自述文件。" id="添加自述文件。" checked><label for="添加自述文件。">添加自述文件。</label></li>
		</ul>

		<h4>图表</h4>
		<p>　　图表标记用于创建各式各样的图表，如：流程图、统计图。</p>

		<h3 id="正文：五、引用标记">五、引用标记</h3>
		<p>　　引用标记包含：块状引用、行内引用、图片视频引用、链接标记、标记引用。</p>

		<h4>块状引用和行内引用</h4>
		<blockquote cite="这里填写来源，如：论文、网页、国标等。">
			<p>　　块状引用会独立成块。</p>
			<p>　　且可包含多段内容。</p>
			<p>　　无论是文字、图片或视频。</p>
		</blockquote>
		<p>　　行内引用是将引用放在行内，<q cite="https://example.org/">引用的内容一般是一句话或一小段文字</q>。</p>
		<p>
			<picture>
				<source src="https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.svg" type="image/svg+xml">
				<source src="https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.avif" type="image/avif">
				<source src="https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.webp" type="image/webp">
				<source src="https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.png" type="image/png">
				<img src="https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.svg" alt="这里填写图片的文字描述，最长限定一句话，图片标记可独立或在行内使用。">
				<span>冻皮. 乱堆标记语言图标[EB/OL].(2020-04-27)[2020-04-27]. https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.svg 采用 <a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0 协议</a> 发布</span>
			</picture>
		</p>
		<p><img src="https://gitee.com/DongPi/jumble_markup_language/raw/master/图标/乱堆标记语言图标.svg" alt="这里是图片的描述。"></p>
		<p>　　视频和图片的标记方法一样，只是比图片多了用在视频播放之前显示图片的｛预览｝标记。</p>
		<p><a target="_blank" href="https://gitee.com/DongPi/jumble_markup_language/" title="这里还能写标题">乱堆标记语言: 乱堆标记语言是根据 Markdown、TeX、HTML的语法弄出来的一个更加优秀（想太多>_<）的排版标记语言。</a></p>
		<p><a table="_self" href="https://gitee.com/DongPi/jumble_markup_language" title="这里填写的标题能在鼠标悬浮在链接上的时候出现。" download class="外站">　　这里填写显示的内容，可以嵌套其他东西。</a></p>
		<p><span class="参考">　　参考一般会让部分内容出现个上标，然后在文末出现来源。<sup><a href="#参考数1" class="参考数1">［1］</a></sup></span><span class="参考"><cite>我怎么知道这是参考了哪里的东西</cite>但这里的参考可独立使用，仅在文末显示来源不显示标记。</span></p>

		<h3 id="正文：六、代码标记">六、代码标记</h3>
		<p>　　代码标记包含：行内代码、块状代码、输出标记、输入标记和变量标记。</p>
		<p>　　常规的代码用行内或块状代码标记。<code class="高亮 Rust"><span class="内建">println!</span>();</code></p>
<pre><code class="高亮 HTML"><cite>这里填写文件位置</cite>
<span class="标签">&lt;p&gt;</span>　　代码块中的代码一般会保留原样输出。<span class="标签">&lt;/p&gt;</span>
</code></pre>
		<p>　　输出和输入标记用于屏幕上的输出和输入。</p>
<pre><code><cite>这里是文件位置</cite>
$~ <kbd>echo 你好</kbd>
<samp>你好<samp>
</code></pre>
		<p>　　变量标记用于标记变量。<var>z</var>=<var>x</var>+<var>y</var>*2</p>

		<h3 id="正文：七、公式标记">七、公式标记</h3>
		<p>　　公式标记可显示公式。</p>

	</main>

	<footer>
		<h2>参考</h2>
		<p id="参考数1">［1］　《GB/T 7714-2015 信息与文献 参考文献著录规则》</p>
	</footer>
</body>
</html>
